<!--
    by: yuanbiao 2021年12月15日
    name: x-battery
    notes:
-->
<template>
  <div :class="[prefixCls, `${prefixCls}-${mode}`]" :style="textStyles" :title="dischargingTimeText">
    <div :class="`${prefixCls}__icon`">
      <div :class="`${prefixCls}__icon_adorn`"></div>
      <div :class="`${prefixCls}__icon_progress`" :style="iconProgressStyles"></div>
      <i class="xvu-iconfont xvu-lightning"></i>
    </div>
    <div v-show="showText" :class="`${prefixCls}__text`">
      <slot name="text">{{`${calcPercent}%`}}</slot>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/script/utils.js'
const prefixCls = 'x-battery'
export default {
  name: 'x-battery',
  props: {
    size: {
      type: Number,
      default: 14
    },
    percent: {
      type: [Number, String],
      default: ''
    },
    mode: {
      type: String,
      default: 'horizontal' // horizontal|vertical
    },
    showText: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      realPercent: 0,
      chargingTime: 0,
      dischargingTime: 0,
      charging: false,
      batteryManager: null
    }
  },
  computed: {
    calcPercent () {
      let result = (this.percent === '' ? this.realPercent : this.percent)
      result = Math.min(100, Math.max(0, result))
      return result
    },
    iconProgressStyles () {
      let result = {}
      if (this.mode === 'vertical') {
        result.height = `${this.calcPercent}%`
      } else {
        result.width = `${this.calcPercent}%`
      }
      return result
    },
    textStyles () {
      return {
        fontSize: `${this.size}px`,
      }
    },
    chargingText () {
      let result = ''
      if (this.charging) {
        result = (this.realPercent < 100 ? '正在充电' : '电源已连接')
      } else {
        result = '未连接电源'
      }
      return result
    },
    dischargingTimeText () {
      let result = ''
      if (this.dischargingTime === Infinity) {
        result = '电源已连接'
      } else {
        result = `剩余${formatTime(this.dischargingTime * 1000)}`
      }
      return result
    }
  },
  mounted () {
    this.getBatteryInfo()
  },
  beforeDestroy () {
    this.removeEvent()
  },
  methods: {
    getBatteryInfo () {
      navigator.getBattery().then((battery) => {
        this.batteryManager = battery
        this.charging = battery.charging
        this.chargingTime = battery.chargingTime
        this.dischargingTime = battery.dischargingTime
        this.realPercent = battery.level * 100
        console.log('电池充电状态:', this.chargingText)
        console.log('电池充电时间:', this.chargingTime)
        console.log('电池断开充电时间:', this.dischargingTimeText)
        console.log('电池电量:', `${this.realPercent}%`)
        this.bindEvent()
      })
    },
    bindEvent () {
      if (this.batteryManager) {
        this.batteryManager.addEventListener('chargingchange', this.chargingchangeHandler)
        this.batteryManager.addEventListener('chargingtimechange', this.chargingtimechangeHandler)
        this.batteryManager.addEventListener('dischargingtimechange', this.dischargingtimechangeHandler)
        this.batteryManager.addEventListener('levelchange', this.levelchangeHandler)
      }
    },
    removeEvent () {
      if (this.batteryManager) {
        this.batteryManager.removeEventListener('chargingchange', this.chargingchangeHandler)
        this.batteryManager.removeEventListener('chargingtimechange', this.chargingtimechangeHandler)
        this.batteryManager.removeEventListener('dischargingtimechange', this.dischargingtimechangeHandler)
        this.batteryManager.removeEventListener('levelchange', this.levelchangeHandler)
      }
    },
    // 电池充电状态更新
    chargingchangeHandler () {
      this.charging = this.batteryManager.charging
      console.log('电池充电状态更新:', this.chargingText)
    },
    // 电池充电时间更新
    chargingtimechangeHandler () {
      this.chargingTime = this.batteryManager.chargingTime
      console.log('电池充电时间更新:', this.chargingTime)
    },
    // 电池断开充电时间更新
    dischargingtimechangeHandler () {
      this.dischargingTime = this.batteryManager.dischargingTime
      console.log('电池断开充电时间更新:', this.dischargingTimeText)
    },
    // 电池电量更新
    levelchangeHandler () {
      this.realPercent = this.batteryManager.level * 100
      console.log('电池电量更新:', `${this.realPercent}%`)
    }
  }
}
</script>
